// 父组件向子孙后代组件传递参数

import React from 'react'
import ReactDOM from 'react-dom'


// children属性值

//  创建context得到两个组件
const { Provider, Consumer } = React.createContext()

class App extends React.Component {
    render() {
        return (
            <Provider value='pink'>
                <div className='app'>
                    <Node />
                    {this.props.children}
                </div>
            </Provider>
        )
    }
}
const Node = (props) => {
    return (
        <div className='node'>
            <SubNode />
        </div>
    )
}
const SubNode = (props) => {
    return (
        <div className='subnode'>
            <Child></Child>
        </div>
    )
}

const Child = (props) => {
    return <div className='child'>
        <Consumer>
            {
                data =><span>我是子节点---{data}</span>
            }
        </Consumer>
    </div>
}

ReactDOM.render(<App>你好</App>, document.getElementById('root'))






